<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>标注尺寸</title>
      <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }

         .box {
             position: relative;
             width: 280px;
             height: 400px;
             margin: 100px auto;
             padding: 15px;
             background-color: #c5c4c4;
         }
         ul {
             display: flex;
             flex-wrap: wrap;
         }
         .list li {
             display: block;
             list-style: none;
             width: 30px;
             height: 20px;
             margin: 5px;
         }
         .list input {
             width: 100%;
         }
         .add {
             width: 30px;
             height: 20px;
         }
         span {
             position: absolute;
             display: block;
             bottom: 0;
         }
         .sum input {
             width: 35px;
             height: 20px;
             margin: 5px;
         }

      </style>
   </head>
   <body>
      <div class="box">
         <ul class="list">
         </ul>
         <button class="add">添加</button>
         <span class="sum">和:<input type="text" name="" id=""></span>
      </div>
      <script>
         const arr = [];
         function render(arr) {
            document.querySelector('.list').innerHTML = arr.map((ele, index) => {
               return `<li><input type="text" value="${ele}" name="" data-id="${index}"></li>`;
            }).join('')
            document.querySelectorAll('.list li input').forEach(input => {
               input.addEventListener('input', updateSum)
            })
         }

         function updateSum() {
            const inputs = document.querySelectorAll('.list li input');
            let sum = 0;
            inputs.forEach(input => {
               const value = parseFloat(input.value);
               if (!isNaN(value)) {
                  sum += value;
               }
            });
            document.querySelector('.sum input').value = sum;
         }
         document.querySelector('.add').addEventListener('click', function () {
            const currentValues = Array.from(document.querySelectorAll('.list li input')).map(input => input.value);
            arr.length = 0;
            arr.push(...currentValues);
            arr.push('');
            render(arr);
            updateSum();
         })
         render(arr)
         updateSum();
      </script>
   </body>
</html>